<template>
	<div class="container">
		<mu-appbar id="my-app-bar" z-depth="5" style="width: 100%;" color="white" text-color="black">
			<mu-button :ripple="false" icon slot="left">
				<mu-icon value="mood"/>
			</mu-button>
			<span>个人中心</span>
			<mu-button slot="right" flat color="secondary" @click="myPopup=true">
				<mu-icon value="info"/>
			</mu-button>
			<vs-popup fullscreen title="关于" :active.sync="myPopup">
				<p>
					时间太紧张了，还没想好这里放什么内容。那就放一个ReadMe吧
					<br><br>
					# project ReadMe
					<br>
					- 设计：https://588ku.com/uiweb/29480.html
					<br>
					- 预览(建议手机端)：https://forum.alexs.fun/index.html
					<br><br>
					## Project setup <br>
					```shell <br>
					# setup <br>
					npm install <br>
					<br><br>
					# Compiles and hot-reloads for development <br>
					npm run serve <br>
					<br><br>
					# Compiles and minifies for production <br>
					npm run build <br>
					<br><br>
					# Lints and fixes files <br>
					npm run lint <br>
					```
					<br>
				</p>
			</vs-popup>
		</mu-appbar>
		<!--个人信息-->
		<div class="top">
			<div class="top_icon">
				<mu-button @click="opent" class="my-top-icon" icon color="white">
					<mu-icon value="forum"/>
				</mu-button>
				<mu-button @click="openS" class="my-top-icon" icon color="white">
					<mu-icon value="settings"/>
				</mu-button>
			</div>

			<mu-drawer :width="drawerWidth" :open.sync="chatOpen" :docked="docked" :right="position === 'right'">
				<!--tab页面header-->
				<mu-appbar z-depth="1" style="width: 100%;" color="white" text-color="black">
					<mu-button icon slot="left" @click="chatOpen=!chatOpen">
						<mu-icon value="keyboard_arrow_left"/>
					</mu-button>
					我的消息
				</mu-appbar>
				<!--                        论坛-->
				<message :mine="user"/>
			</mu-drawer>

			<mu-drawer :width="drawerWidth" :open.sync="setOpen" :docked="docked" :right="position === 'right'">
				<my-settings :esc="openS"/>
			</mu-drawer>

			<div class="top_me">

				<div class="me_avator">
					<mu-avatar :size="80">
						<img :src="user.avatar">
					</mu-avatar>
				</div>

				<div class="me_info">
					<div class="info_name">
						<span>{{user.name}}</span>
						<div class="like">爱晒单</div>
					</div>
					<div class="info_msg">
						<span>{{user.msg}}</span>
					</div>
				</div>

			</div>
			<div class="top_info">
				<div class="info_item" v-for="(item, key) in user.items" :key="key">
					<span class="num">{{item.num}}</span>
					<span class="item">{{item.name}}</span>
				</div>
			</div>
		</div>
		<!--菜单栏-->
		<div class="main">
			<!--            订单栏-->
			<my-c-divider :title="titles[0]" :hint="hint"/>
			<div class="main_order">
				<div class="order_item">
					<div class="item">
						<img src="https://forum.alexs.fun/me/pay.png">
						<span>待付款</span>
					</div>
					<div class="item">
						<img src="https://forum.alexs.fun/me/send.png">
						<span>待发货</span>
					</div>
					<div class="item">
						<img src="https://forum.alexs.fun/me/receive.png">
						<span>待收货</span>
					</div>
					<div class="item">
						<img src="https://forum.alexs.fun/me/crisis.png">
						<span>待评价</span>
					</div>
					<div class="item">
						<img src="https://forum.alexs.fun/me/service.png">
						<span>售后</span>
					</div>
				</div>
			</div>
			<!--            福利栏-->
			<my-c-divider :title="titles[1]" :hint="hint"/>
			<div class="main_welfare">
				<my-card-slider gradual/>
			</div>
			<!--            工具栏-->
			<my-c-divider :title="titles[2]" :hint="hint"/>
			<div class="main_tool">
				<div class="tool_wrap">
					<div class="tool_item">
						<div class="item" v-for="(item, key) in icons" :key="key">
							<img :src="item.src" :alt="item.desc">
							<span>{{item.desc}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<my-footer/>
	</div>
</template>

<script>
import Message from "./components/me/Message";
import MySettings from "@/pages/components/me/MySettings";
import MyFooter from "@/pages/components/public/MyFooter";
import MyCDivider from "./components/public/MyCDivider";
import MyCardSlider from "@/pages/components/public/MyCardSlider";

export default {
	name: "Me",
	data() {
		return {
			user: {
				avatar: 'https://forum.alexs.fun/me/user/head1.jpg',
				name: '蓦然回首',
				msg: '永远的神',
				items: [
					{name: '收藏夹', num: '55'},
					{name: '话题关注', num: '60'},
					{name: '历史痕迹', num: '60'},
				]
			},
			titles: [
				'我的订单', '福利', '必备工具'
			],
			hint: '更多',
			icons: [
				{src: 'https://forum.alexs.fun/me/tool/moneybag.png', desc: '红包卡卷'},
				{src: 'https://forum.alexs.fun/me/tool/check.png', desc: '发票'},
				{src: 'https://forum.alexs.fun/me/tool/comment.png', desc: '我的评价'},
				{src: 'https://forum.alexs.fun/me/tool/vip.png', desc: '会员名'},
				{src: 'https://forum.alexs.fun/me/tool/kefu.png', desc: '客服'},
				{src: 'https://forum.alexs.fun/me/tool/quan.png', desc: '领券中心'},
				{src: 'https://forum.alexs.fun/me/tool/design.png', desc: '我要定制'},
				{src: 'https://forum.alexs.fun/me/tool/freemoney.png', desc: '闲置换钱'},
			],
			docked: false,
			chatOpen: false,
			setOpen: false,
			menuOpen: false,
			position: 'left',
			drawerWidth: '100%',
			myPopup: false
		}
	},
	components: {MySettings, MyCardSlider, Message, MyCDivider, MyFooter},
	methods: {
		openLoading() {
			this.$vs.loading({
				color: '#49A28C',
				type: "sound"
			})
			setTimeout(() => {
				this.$vs.loading.close()
			}, 500);
		},
		opent: function () {
			this.chatOpen = !this.chatOpen
		},
		openS: function () {
			this.setOpen = !this.setOpen
		}
	},
	created() {
		this.openLoading()
	},
}
</script>

<style scoped>
	.container {
		width: 100%;
		padding: 0;
	}
	/*顶部个人信息*/
	.top {
		background-image: linear-gradient(90deg, #7FDCCA, #4DA692);
		width: 100%;
		overflow: hidden;
		padding: 3px 3px 50px;
	}
	/*设置图标*/
	.top_icon {
		height: 48px;
		font-size: 18px;
		line-height: 30px;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.my-top-icon,
	.top_icon .icon {
		display: inline-block;
		padding: 0;
		margin-right: 0;
	}
	/*个人信息*/
	.top_me {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	.top_me .me_avator {
		margin: 5px 15px;
	}
	.top_me .me_info {
		width: 100%;
	}
	.info_name {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		color: white;
		margin-top: 10px;
	}
	.info_name span {
		color: #ffffff;
		font-size: 20px;
		float: left;
	}
	.info_name .like {
		text-align: center;
		width: 68px;
		height: 24px;
		margin-left: 10px;
		background: rgb(149, 211, 198);
		border-radius: 12px;
		line-height: 24px;
	}
	.info_msg {
		float: left;
		height: 20px;
		text-align: center;
		margin-top: 13px;
		color: rgb(193, 232, 227);
	}
	/*个人详情*/
	.top_info {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 50px;
		width: 100%;
		font-size: 20px;
	}
	.top_info .info_item {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.info_item span {
		flex: 1;
	}
	.info_item .num {
		color: #ffffff;
	}
	.info_item .item {
		font-size: 15px;
		color: rgb(179, 222, 214);
	}

	/*主页*/
	.main {
		width: 100%;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		background: white;
		overflow: hidden;
		z-index: 2;
		margin-top: -40px;
	}
	/*订单*/
	.main .main_order {
		width: 100%;
	}
	.main .main_welfare {
		width: 100%;
		margin-top: 10px;
	}
	.main .main_tool {
		width: 100%;
		height: 150px;
	}
	/*订单*/
	.main .order_top {
		width: 100%;
		height: 30px;
	}

	.main .order_item {
		height: 72px;
		width: 100%;
		flex-direction: row;
		display: flex;
	}
	.order_item .item {
		flex: 1;
		margin-top: 15px;
		margin-left: 18px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.item span {
		flex: 1;
	}
	.item img {
		flex: 1;
	}
	/*福利*/
	.main_welfare .welfare_item {
		display: flex;
		height: 130px;
		width: 100%;
		justify-content: space-around;

	}
	.welfare_item .item {
		width: 250px;
		height: 130px;
		background: rgb(244, 130, 119);
		border-radius: 25px;
		margin-top: 20px;
		overflow: hidden;
	}
	.item .item_text {
		float: left;
		margin-left: 12px;
		height: 100%;
		margin-top: 30px;
	}
	.item_text .item_name {
		color: white;
		font-size: 25px;
	}
	.item_text .item_msg {
		font-size: 20px;
		color: rgb(193, 232, 227);
	}
	.welfare_item img {
		width: 69px;
		height: 78px;
		margin-top: 19px;
	}
	/*工具*/
	.main .tool_item {
		height: 72px;
		width: 100%;
		flex-direction: row;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.tool_item .item {
		width: 20%;
		margin-top: 15px;
		margin-left: 18px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.item span {
		flex: 1;
	}
	.item img {
		flex: 1;
	}
	.mu-appbar{
		position: sticky;
		top: 0;
		z-index: 2;
	}

</style>